<template>
	<view class="mydetail-body">
		<view class="ava-view tn-padding-sm tn-flex-direction-row tn-flex-row-center tn-flex border-line-view"
			@touchend="changeAvatar">
			<tn-avatar class="avatar-clas" size="xl" :src="avatarUrl"></tn-avatar>
			<view class="right-xiugai-icon">
				<text>修改</text>
				<view class="tn-icon-right"></view>
			</view>
		</view>
		<tn-list-view title="幼儿信息" :card="true" unlined="all">
		  <block>
			<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						姓名
					</view>
					<view class="tn-padding-right" @click="showNamepop">
						{{childInfo.name}}
					</view>
				</view>
			</tn-list-cell>
		  </block>
		  <block>
		  	<tn-list-cell :arrow="false">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						班级
					</view>
					<view class="tn-padding-right">
						{{childInfo.className}}
					</view>
				</view>
		  	</tn-list-cell>
		  </block>
		  <block>
		  	<tn-list-cell :arrow="false">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						学号
					</view>
					<view class="tn-padding-right">
						{{childInfo.studentNumber}}
					</view>
				</view>
		  	</tn-list-cell>
		  </block>
		  <block>
		  	<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						性别
					</view>
					<view class="tn-padding-right" @click="changeGender">
						{{childInfo.genderSte}}
					</view>
				</view>
		  	</tn-list-cell>
		  </block>
		  <block>
		  	<tn-list-cell :arrow="true">
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						出生日期
					</view>
					<view class="tn-padding-right" @click="changebrithday">
						{{childInfo.birthdayStr}}
					</view>
				</view>
		  	</tn-list-cell>
		  </block>
		</tn-list-view>
		
		<tn-modal
		  v-model="showtnmodal"
		  :radius="10"
		  :maskCloseable="true"
		  :zoom="true"
		  :custom="true"
		>
		  <view>
			<view class="custom-modal-content">
				  <tn-form :labelWidth="120" class="tn-margin-bottom">
					<tn-form-item label="姓名" :borderBottom="false">
					  <tn-input placeholder="请输入姓名" v-model="name" border></tn-input>
					</tn-form-item>
				  </tn-form>
				<view class="tn-flex tn-flex-row-between">
					<tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="150rpx" backgroundColor="#A4E82F" fontColor="#ffffff">关闭</tn-button>
					<tn-button class="opo-bottom-btn" shape="round" @click="submitChange()" width="150rpx" backgroundColor="#01BEFF" fontColor="#ffffff">确认</tn-button>
				</view>
			</view>
		  </view>
		</tn-modal>
		
		<tn-select
		  v-model="showxingbieSelect"
		  mode="single"
		  title="请选择性别"
		  :list="xingbielist"
		  :maskCloseable="true"
		  @confirm="confirmSelect"
		>
		</tn-select>
		
		<tn-picker
		  v-model="showriqipocker"
		  mode="time"
		  :showTimeTag="true"
		  :maskCloseable="true"
		  :defaultTime="defaultTime"
		  @confirm="confirmTimePicker"
		>
		</tn-picker>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default {
		name: 'mydetail',
		data() {
			return {
				avatarUrl: 'https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2',
				loginType: 2,
				imageTitle: '',
				userInfo:{},
				childInfo:{},
				showtnmodal: false,
				name: '',
				showxingbieSelect: false,
				xingbielist: [
					{ value: 1, label: '男' },
					{ value: 2, label: '女' },
				],
				showriqipocker: false,
				defaultTime: '',
				birthday: '',
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			uni.$on('avatarfile', (data) => {
				console.log('监听-----------', data)
				this.updateAvatar(data);
			})
			this.getChildInfo();
		},
		methods: {
			getChildInfo(){
				this.request({
					url: '/Children/MobileChildInfo',
					method: 'get',
				}).then(res => {
					if(res.code == 200){
						this.childInfo = res.data?res.data:{};
						this.avatarUrl = this.imageTitle + this.childInfo.imgId;
					}else{
						this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
						})
					}
				})
			},
			updateAvatar(data){
				if(data.page == 'baobao'){
					let postData = {
						imgId: data.imgId,
						childId: this.userInfo.childId
					}
					this.editFunction(postData, 'avatar');
				}
			},
			
			changeAvatar(){
				uni.navigateTo({
					url: '/pages/my/avatar?page=baobao&avatarId='+this.childInfo.imgId,
				})
				// let that = this;
				// wx.chooseImage({
				// 	count: 1,
				// 	sizeType: ['original', 'compressed'],
				// 	sourceType: ['album', 'camera'],
				//    success: chooseResult => {
				// 		console.log(chooseResult)
				// 		let file = chooseResult.tempFiles[0];
				// 		let filePath = chooseResult.tempFilePaths[0];
				// 		that.uploadPhoto(file, filePath, async (resData) => {
				// 			if(resData.code == 200){
				// 					let postData = {
				// 						imgId: resData.data,
				// 						childId: this.userInfo.childId
				// 					}
									
				// 					let _url = this.imageTitle + resData.data
				// 					let cresult = await this.contentCheck.mediaCheck(2, _url, 2)
				// 					if(!cresult){
				// 						return
				// 					}
				// 					this.editFunction(postData, 'avatar');
				// 				that.avatarUrl = that.imageTitle + resData.data;
				// 			}
				// 		})
				// 	}
				// })
			},
			
			
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						
							  this.$refs.toast.show({
							    title: '',
							    content: '上传错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
					}
				});
			},
			editFunction(postData, changeType){
				this.request({
					url: '/Children/MobileUpdateHeadshot',
					method: 'post',
					params: postData
				}).then(res => {
					if(res.code == 200){
						this.avatarUrl = this.imageTitle + postData.imgId;
						this.$refs.toast.show({
								    title: '',
								    content: '保存成功',
								    icon: 'success',
								    image: '',
								    duration: 1000
						})
					}else{
						this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
						})
					}
				})
			},
			async submitChange(){
				if(!this.name){
					this.$refs.toast.show({
						title: '',
						content: '请填写正确姓名',
						icon: 'fail',
						image: '',
						duration: 1500
					})
					return;
				}
				let cresult = await this.contentCheck.checkRequest(2, this.name)
				if(!cresult){
					return
				}
				this.showtnmodal = false;
				
				let postData = {
					id: this.childInfo.id,
					name: this.name,
					birthday: this.childInfo.birthdayStr,
					gender: this.childInfo.gender
				}
				this.editbaobaoUser(postData, 'name');
			},
			showNamepop(){
				this.name = this.childInfo.name
				this.showtnmodal = true;
			},
			closedPopup(){
				this.name = ''
				this.showtnmodal = false;
			},
			changeGender(){
				this.showxingbieSelect = true;
			},
			confirmSelect(val, label){
				this.showxingbieSelect = false;
				let postData = {
					id: this.childInfo.id,
					name: this.childInfo.name,
					birthday: this.childInfo.birthdayStr,
					gender: val[0].value,
				}
				this.editbaobaoUser(postData, 'gender');
			},
			changebrithday(){
				this.defaultTime = this.childInfo.birthdayStr
				this.showriqipocker = true;
			},
			confirmTimePicker(val){
				this.showriqipocker = false;
				if(!val){return}
				this.birthday = val.year + '-' + val.month + '-' + val.day;
				
				let postData = {
					id: this.childInfo.id,
					name: this.childInfo.name,
					birthday: this.birthday,
					gender: this.childInfo.gender,
				}
				this.editbaobaoUser(postData, 'gender');
			},
			editbaobaoUser(postData, changeType){
				this.request({
					url: '/Children/MobileEdit',
					method: 'post',
					params: postData
				}).then(res => {
					if(res.code == 200){
						this.getChildInfo()
						this.$refs.toast.show({
								    title: '',
								    content: '保存成功',
								    icon: 'success',
								    image: '',
								    duration: 1000
						})
					}else{
						this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1500
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mydetail-body {

		height: 100vh;
		background-color: rgba(245, 245, 245, 1);
	}

	.position-relateve {
		position: relative;
	}

	.right-xiugai-icon {
		position: absolute;
		right: 15px;
		top: 36px;
	}

	.tn-icon-right {
		display: inline-block;
	}

	.avatar-clas {}

	.ava-view {
		height: 160rpx;
	}

	.height-100 {
		height: 100rpx;
		height: 100rpx;
	}

	.width-150 {
		width: 150rpx;
	}
</style>
